<!--
 * @Descripttion: 描述
 * @Author: 刘黎
 * @Date: 2024-06-27 19:40:48
 * @LastEditors: 刘黎
 * @LastEditTime: 2024-09-06 13:35:34
-->
<!-- 新增好友 -->
<template>
  <div class="apption">
    <!-- 标题 -->
    <div class="pageTitle">商品管理</div>
    <div class="topBox">
      <div class="searchTop">
        <div class="left">
          <el-form :inline="true" :model="prop" class="demo-form-inline" label-width="100px">
            <el-form-item label="商品货号:">
              <el-input v-model="prop.item_number" placeholder="请输入商品货号" @change="initShoping" />
            </el-form-item>
            <el-form-item label="商品名称:">
              <el-input v-model="prop.title" placeholder="请输入商品名称" @change="initShoping" />
            </el-form-item>
            <el-form-item label="价格区间:">
              <el-input v-model="prop.min_price" placeholder="最低价格" clearable style="width: 120px;" />
              -
              <el-input v-model="prop.max_price" placeholder="最高价格" clearable style="width: 120px;" @change="initShoping" />
            </el-form-item>
            <el-form-item label="商品分类:">
              <el-select v-model="prop.cate_id" clearable placeholder="请选择商品分类" style="width: 200px;" @change="initShoping">
                <el-option
                  v-for="list,index in oneClassData"
                  :key="index"
                  :label="list.title"
                  :value="list.id"/>
              </el-select>
            </el-form-item>
            <el-form-item label="商品状态:">
              <el-select v-model="prop.status" clearable placeholder="请选择任务状态" style="width: 200px;" @change="initShoping">
                <el-option
                  label="全部"
                  value=""/>
                <el-option
                  label="上架"
                  :value="2"/>
                <el-option
                  label="下架"
                  :value="1"/>
              </el-select>
            </el-form-item>
            <el-form-item label="销量区间:">
              <el-input v-model="prop.min_sales" clearable placeholder="销量最小值" style="width: 120px;" />
              -
              <el-input v-model="prop.max_sales" clearable placeholder="销量最大值" style="width: 120px;" @change="initShoping" />
            </el-form-item>
            <el-form-item label="库存区间:">
              <el-input v-model="prop.min_stock" clearable placeholder="库存最小值" style="width: 120px;" />
              -
              <el-input v-model="prop.max_stock" clearable placeholder="库存最大值" style="width: 120px;" @change="initShoping" />
            </el-form-item>
            <el-form-item label="创建时间:">
              <el-date-picker
                v-model="prop.create_timeArr"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                clearable
                style="width: 320px;"
                @change="initShoping"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="right">
          <el-button type="primary" @click="initShoping">查询</el-button>
          <el-button type="primary" @click="resetClick">重置</el-button>
          <div style="height: 20px;"></div>
          <el-button type="success" @click="addClick">新增</el-button>
          <el-button type="primary" :loading="loading" @click="exportFun">导出</el-button>
          <div style="height: 20px;"></div>
          <el-button type="success" @click="groundingFun">批量上架</el-button>
          <el-button type="primary" :loading="loading" @click="OffShelfFun">批量下架</el-button>
        </div>
      </div>
    </div>
    <div class="tableClass">
      <el-table ref="refTable" :data="tableData" v-loading="loading"
        :row-key="getRowKeys" border
        @selection-change="handleSelectionChange" style="width: 100%">
        <el-table-column type="selection" :reserve-selection="true" width="55" />
        <!-- <el-table-column type="index" label="序号" width="60" /> -->
        <el-table-column prop="title" label="商品名称" />
        <el-table-column prop="cate_title" label="商品分类" width="100" />
        <el-table-column label="商品图片" width="100">
          <template #default="scope">
            <template v-if="scope.row.logo.includes('mp4')">
              <video :src="scope.row.logo" style="width:45px;height:45px;" />
            </template>
            <el-image v-else :src="scope.row.logo" style="width:45px;height:45px;"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品状态" width="100" >
          <template #default="scope">
            <template v-if="scope.row.status===2">
              上架中
            </template>
            <template v-if="scope.row.status===1">
              下架
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="库存" width="80" />
        <el-table-column prop="total_stock" label="数量" width="80" />
        <el-table-column label="销售价格" width="100">
          <template #default="scope">
            ￥{{ scope.row.discount_price }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间 " width="170">
          <template #default="scope">
            {{ scope.row.update_time }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <el-button type="danger" size="small" @click="deleteClick(scope.row)">删除</el-button>
            <el-button type="primary" size="small" @click="editClick(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status===1" type="success" size="small" @click="groundingOneFun(scope.row)">上架</el-button>
            <el-button v-if="scope.row.status===2" type="primary" size="small" @click="OffShelfOneFun(scope.row)">下架</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="timedPagination">
      <el-pagination
        v-model:current-page="prop.page"
        v-model:page-size="prop.pageSize"
        :total="prop.total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!-- 新增or编辑 -->
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      :before-close="dialogClose"
      :title="addPropForm.goods_id ? '编辑商品' : '添加商品'"
      :close-on-click-modal="false"
      top="3vh"
      class="goodsDialog"
    >
      <div class="dialogContent">
        <el-steps v-if="addPropForm.goods_id" class="steps" :active="addPropForm.step" align-center>
          <el-step title="商品基础信息" @click="addPropForm.step=1;initGoodsMore()" />
          <el-step title="商品sku分类" @click="addPropForm.step=2;initGoodsMore()" />
          <el-step title="商品sku明细" @click="addPropForm.step=3;initGoodsMore()" />
          <el-step title="商品参数" @click="addPropForm.step=4;initGoodsMore()" />
          <el-step title="商品详情" @click="addPropForm.step=5;initGoodsMore()" />
        </el-steps>
        <div v-if="addPropForm.step==1" class="partitionBox">
          <p class="title">商品分区</p>
          <div class="partitionList">
            <div class="list" :class="addPropForm.partition===1?'active':''" @click="addPropForm.partition=1">
              新品区
              <p>上新商品即时推荐到新品分区</p>
            </div>
            <div class="list" :class="addPropForm.partition===2?'active':''" @click="addPropForm.partition=2">
              加购区
              <p>快速推广单独奖励佣金</p>
            </div>
            <div class="list" :class="addPropForm.partition===3?'active':''" @click="addPropForm.partition=3">
              甄选区
              <p>常规款日常推流分区</p>
            </div>
            <div class="list" :class="addPropForm.partition===4?'active':''" @click="addPropForm.partition=4">
              福利区
              <p>流量单品推广效果好再次加开</p>
            </div>
          </div>
        </div>
        <div v-if="addPropForm.step==1" class="classCheckBox">
          <p class="title">商品分类</p>
          <div class="classOption">
            <div class="oneClass">
              <p class="title"><el-icon><Grid /></el-icon>商品一级分类管理</p>
              <div v-for="list,index of oneClassData" :key="index" class="list" :class="oneClassValue===list.id?'active':''" @click="ClassClick(list,1)">
                <span>{{ list.title }}</span>
                <span>
                  <template v-if="list.is_home===1">首页推荐中</template>
                  <el-icon><ArrowRight /></el-icon>
                </span>
              </div>
            </div>
            <div class="twoClass">
              <p class="title"><el-icon><Grid /></el-icon>商品二级分类管理</p>
              <div v-for="list,index of twoClassData" :key="index" class="list" :class="twoClassValue===list.id?'active':''" @click="ClassClick(list,2)">
                <span>{{ list.title }}</span>
                <span>
                  <template v-if="list.is_home===1">首页推荐中</template>
                  <el-icon><ArrowRight /></el-icon>
                </span>
              </div>
            </div>
            <div class="threeClass">
              <p class="title"><el-icon><Grid /></el-icon>商品三级分类管理</p>
              <div v-for="list,index of threeClassData" :key="index" class="list" :class="threeClassValue===list.id?'active':''" @click="ClassClick(list,3)">
                <span>{{ list.title }}</span>
                <span>
                  <template v-if="list.is_home===1">首页推荐中</template>
                  <el-icon><ArrowRight /></el-icon>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div v-if="addPropForm.step==1" class="goodsInfo">
          <p class="title">商品基础信息</p>
          <el-form :model="addPropForm" label-width="auto">
            <el-form-item label="商品名称:" required>
              <el-input v-model="addPropForm.title" placeholder="请输入商品名称" />
            </el-form-item>
            <el-form-item label="商品描述:">
              <el-input v-model="addPropForm.describe" type="textarea" placeholder="请输入商品描述" />
            </el-form-item>
            <el-form-item label="禁售地区:">
              <el-input v-model="addPropForm.ban_region" placeholder="请输入商品不发货的地区" />
            </el-form-item>
            <el-form-item label="商品图片和视频:" required>
              <elUploadOptionMultiple v-if="dialogVisible" :fileUploadList="addPropForm.images" accept=".jpg,.png,.mp4" @getImagesFun="getImagesFun" />
              <div class="msg">最多上传9个素材，其中最多上传1个视频（mp4格式），视频时长不超过60秒，视频大小不超过200M。视频将默认展示在图片之前，拖拽图片可进行排序，单张图片需限制在10M以内。</div>
            </el-form-item>
            <el-form-item label="商品标签:">
              <el-input v-model="addPropForm.label" placeholder="请输入商品标签" />
            </el-form-item>
            <el-form-item label="是否热门商品:">
              <el-checkbox v-model="addPropForm.is_hot" :true-value="1" :false-value="0" size="large" />
            </el-form-item>
          </el-form>
          <p class="title">商品设置</p>
          <el-form :model="addPropForm" label-width="auto" style="width: 600px;">
            <el-form-item label="商品上架时间:">
              <el-date-picker
                v-model="addPropForm.put_time"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 280px;"
              />
            </el-form-item>
            <el-form-item label="自动上架时间:">
              <el-date-picker
                v-model="addPropForm.auto_put_time"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 280px;"
              />
            </el-form-item>
            <el-form-item label="开启商品预售:">
              <el-checkbox v-model="addPropForm.is_pre" :true-value="1" :false-value="0" size="large" />
            </el-form-item>
            <el-form-item v-if="addPropForm.is_pre==1" label="商品预售时间:" required>
              <el-date-picker
                v-model="addPropForm.start_time"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
            <el-form-item label="商品货号:">
              <el-input v-model="addPropForm.item_number" placeholder="请输入商品货号" />
            </el-form-item>
          </el-form>
        </div>
        <div v-if="addPropForm.step==2" class="skuOption">
          <p class="title">商品sku分类</p>
          <div class="skuListBox">
            <div v-for="list,index of addPropForm.sku" :key="index" class="list">
              <p class="title">sku分类{{ index }}  <el-icon v-if="index>=1" style="margin-left: 10px;" @click="deleteSkuFun(index, list)"><DeleteFilled /></el-icon></p>
              <div class="name">
                <span>sku分类名称：</span>
                <el-input v-model="list.title" placeholder="请输入sku分类名称" :disabled="isStepEdit" style="width: 300px;margin-right: 10px;" />
                <span class="illustration">配图</span>
              </div>
              <div class="skuimagesBox">
                <span class="label">sku分类配图：</span>
                <div class="nextSkuList">
                  <div v-for="valueList,j of list.values" :key="j+'sub'" class="nextList">
                    <el-input v-model="valueList.name" placeholder="请输入sku名称" :disabled="isStepEdit" style="width: 300px;margin-right: 10px;" />
                    <el-icon v-if="j>=1" style="margin-right: 10px;" @click="deleteSkuValuesFun(index, j, valueList)"><DeleteFilled /></el-icon>
                    <elUploadOptionMultipleSmall :fileUploadList="[list.image[j]]" :limit="1" @getImagesFun="getskuImagesFun(index, j, $event)" />
                  </div>
                  <div class="nextSkuBut" @click="addListSkuValues(index)"><el-icon><CirclePlus /></el-icon>添加分类下sku</div>
                </div>
              </div>
            </div>
          </div>
          <div @click="addListSku(list)"><el-icon><CirclePlus /></el-icon>添加新的sku分类</div>
        </div>
        <div v-if="addPropForm.step==3" class="skuMoreOption">
          <p class="title">商品sku售价与库存</p>
          <div class="batchOption">
            <span class="label">批量设置：</span>
            <div class="optionBox">
              <div class="top">
                <el-select
                  v-model="batchValue.arr"
                  multiple
                  placeholder="请选择批量设置sku组合"
                  style="width: 400px"
                >
                  <el-option
                    v-for="item in batchOption"
                    :key="item.sku"
                    :label="item.sku"
                    :value="item.sku"
                  />
                </el-select>
              </div>
              <div class="down">
                <span class="labelSpan">原价价格:</span><el-input v-model="batchValue.price" type="number" placeholder="请输入原价价格" style="width: 200px;" />
                <span class="labelSpan">售卖价格:</span><el-input v-model="batchValue.money" type="number" placeholder="请输入售卖价格" style="width: 200px;" />
                <span class="labelSpan">库存:</span><el-input v-model="batchValue.stock" type="number" placeholder="请输入库存" style="width: 200px;" />
                <el-button type="success" @click="batchClick()">批量填入</el-button>
              </div>
              <div class="down">
                <span class="labelSpan">分公司利润:</span><el-input v-model="batchValue.profit_1" type="number" placeholder="请输入分公司利润" style="width: 200px;" />
                <span class="labelSpan">大批发利润:</span><el-input v-model="batchValue.profit_2" type="number" placeholder="请输入大批发利润" style="width: 200px;" />
                <span class="labelSpan">中批发利润:</span><el-input v-model="batchValue.profit_3" type="number" placeholder="请输入中批发利润" style="width: 200px;" />
              </div>
              <div class="down">
                <span class="labelSpan">小批发利润:</span><el-input v-model="batchValue.profit_4" type="number" placeholder="请输入小批发利润" style="width: 200px;" />
                <span class="labelSpan">团长利润:</span><el-input v-model="batchValue.profit_5" type="number" placeholder="请输入团长利润" style="width: 200px;" />
                <span class="labelSpan" v-if="addPropForm.partition===2">奖励金额:</span><el-input v-if="addPropForm.partition===2" v-model="batchValue.bonus" type="number" placeholder="请输入奖励金额" style="width: 200px;" />
                <span class="labelSpan">单次购买数量:</span><el-input v-model="batchValue.one_num" type="number" placeholder="请输入单次购买数量" style="width: 200px;" />
              </div>
            </div>
          </div>
          <div v-for="list,index of addPropForm.infoSku" :key="index" class="skuInfoList">
            <div class="top">
              <span>{{ list.sku }}</span>
              <div>上架 <el-switch v-model="list.status" :active-value="1" :inactive-value="2" /></div>
            </div>
            <div class="inputBox">
              <span class="labelSpan">原价价格:</span><el-input v-model="list.price" type="number" placeholder="请输入原价价格" style="width: 200px;" />
              <span class="labelSpan">售卖价格:</span><el-input v-model="list.money" type="number" placeholder="请输入售卖价格" style="width: 200px;" />
              <span class="labelSpan">分公司利润:</span><el-input v-model="list.profit_1" type="number" placeholder="请输入分公司利润" style="width: 200px;" />
              <br>
              <span class="labelSpan">大批发利润:</span><el-input v-model="list.profit_2" type="number" placeholder="请输入大批发利润" style="width: 200px;" />
              <span class="labelSpan">中批发利润:</span><el-input v-model="list.profit_3" type="number" placeholder="请输入中批发利润" style="width: 200px;" />
              <span class="labelSpan">小批发利润:</span><el-input v-model="list.profit_4" type="number" placeholder="请输入小批发利润" style="width: 200px;" />
              <br>
              <span class="labelSpan">团长利润:</span><el-input v-model="list.profit_5" type="number" placeholder="请输入团长利润" style="width: 200px;" />
              <span class="labelSpan" v-if="addPropForm.partition===2">奖励金额:</span><el-input v-if="addPropForm.partition===2" v-model="list.bonus" type="number" placeholder="请输入奖励金额" style="width: 200px;" />
              <span class="labelSpan">库存:</span><el-input v-model="list.stock" type="number" placeholder="请输入库存" style="width: 200px;" />
              <span class="labelSpan">单次购买数量:</span><el-input v-model="list.one_num" type="number" placeholder="请输入单次购买数量" style="width: 200px;" />
              <span class="labelSpan">团购价格:</span>{{ (Number(list.money) + Number(list.profit_1) + Number(list.profit_2) + Number(list.profit_3) + Number(list.profit_4) + Number(list.profit_5)).toFixed(2) }}
            </div>
          </div>
        </div>
        <div v-if="addPropForm.step==4" class="parameterOption">
          <p class="title">商品参数设置</p>
          <div class="parameterList">
            <div v-for="list,index of addPropForm.content" :key="index" class="list">
              <span>参数{{ index + 1 }}</span>
              <el-input v-model="list.value" placeholder="请输入参数名称" style="width: 200px;" />
              <el-input v-model="list.key" placeholder="请输入参数值" style="width:200px;" />
              <elUploadOptionMultipleSmall :fileUploadList="list.image" :limit="1" @getImagesFun="getContentImagesFun(index, $event)" />
              <el-icon @click="deleteParameterFun(index)" style="margin-left:20px;"><DeleteFilled /></el-icon>
            </div>
            <div class="addParameterBut" @click="addParameterFun()"><el-icon><CirclePlus /></el-icon>添加新的参数</div>
          </div>
        </div>
        <div v-if="addPropForm.step==5" class="infoOption">
          <div v-for="list,index of addPropForm.info" :key="index" class="goodsMore">
            <template v-if="list.type==1">
              <p class="title">商品详情</p>
              <div class="goodsMoreList">
                <div v-for="sub,j of list.TempArr" :key="j+'sub'" class="list">
                  <div class="nameTop">分区{{ j + 1 }}: <el-icon v-if="j>=1" style="margin-left: 10px;" @click="deleteInfoFun(index, j, sub)"><DeleteFilled /></el-icon></div>
                  <elUploadOptionMultiple :fileUploadList="sub.files" @getImagesFun="getImagesGoodsMoreFun(index, j, $event)" />
                  <p class="msg">最多上传9个素材，其中最多上传1个视频（mp4格式），视频时长不超过60秒，视频大小不超过200M。视频将默认展示在图片之前，单张图片需限制在10M以内。</p>
                  <el-input v-model="sub.title" placeholder="请输入分区名称" style="width: 200px;" />
                </div>
                <div class="addParameterBut" @click="addInfoFun(list,index)"><el-icon><CirclePlus /></el-icon>添加新的分区</div>
              </div>
            </template>
            <template v-if="list.type==2">
              <p class="title">商品实拍</p>
              <div class="goodsMoreList">
                <div v-for="sub,j of list.TempArr" :key="j+'sub'" class="list">
                  <div class="nameTop">分区{{ j + 1 }}: <el-icon v-if="j>=1" style="margin-left: 10px;" @click="deleteInfoFun(index, j, sub)"><DeleteFilled /></el-icon></div>
                  <elUploadOptionMultiple :fileUploadList="sub.files" @getImagesFun="getImagesGoodsMoreFun(index, j, $event)" />
                  <p class="msg">最多上传9个素材，其中最多上传1个视频（mp4格式），视频时长不超过60秒，视频大小不超过200M。视频将默认展示在图片之前，单张图片需限制在10M以内。</p>
                  <el-input v-model="sub.title" placeholder="请输入分区名称" style="width: 200px;" />
                </div>
                <div class="addParameterBut" @click="addInfoFun(list,index)"><el-icon><CirclePlus /></el-icon>添加新的分区</div>
              </div>
            </template>
            <template v-if="list.type==3">
              <p class="title">资质授权</p>
              <div class="goodsMoreList">
                <div v-for="sub,j of list.TempArr" :key="j+'sub'" class="list">
                  <div class="nameTop">分区{{ j + 1 }}: <el-icon v-if="j>=1" style="margin-left: 10px;" @click="deleteInfoFun(index, j, sub)"><DeleteFilled /></el-icon></div>
                  <elUploadOptionMultiple :fileUploadList="sub.files" @getImagesFun="getImagesGoodsMoreFun(index, j, $event)" />
                  <p class="msg">最多上传9个素材，其中最多上传1个视频（mp4格式），视频时长不超过60秒，视频大小不超过200M。视频将默认展示在图片之前，单张图片需限制在10M以内。</p>
                  <el-input v-model="sub.title" placeholder="请输入分区名称" style="width: 200px;" />
                </div>
                <div class="addParameterBut" @click="addInfoFun(list,index)"><el-icon><CirclePlus /></el-icon>添加新的分区</div>
              </div>
            </template>
            <template v-if="list.type==4">
              <p class="title">关于售后</p>
              <div class="goodsMoreList">
                <div v-for="sub,j of list.TempArr" :key="j+'sub'" class="list">
                  <div class="nameTop">分区{{ j + 1 }}: <el-icon v-if="j>=1" style="margin-left: 10px;" @click="deleteInfoFun(index, j, sub)"><DeleteFilled /></el-icon></div>
                  <elUploadOptionMultiple v-if="addPropForm.step==5" :fileUploadList="sub.files" @getImagesFun="getImagesGoodsMoreFun(index, j, $event)" />
                  <p class="msg">最多上传9个素材，其中最多上传1个视频（mp4格式），视频时长不超过60秒，视频大小不超过200M。视频将默认展示在图片之前，单张图片需限制在10M以内。</p>
                  <el-input v-model="sub.title" placeholder="请输入分区名称" style="width: 200px;" />
                </div>
                <div class="addParameterBut" @click="addInfoFun(list,index)"><el-icon><CirclePlus /></el-icon>添加新的分区</div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <template v-if="addPropForm.goods_id">
            <el-button v-if="addPropForm.step==1" :loading="loading" type="primary" @click="dialogClose()">取消</el-button>
            <el-button v-if="addPropForm.step==1" :loading="loading" type="success" @click="nextGoodsFun()">保存</el-button>
            <el-button v-if="addPropForm.step==1" :loading="loading" type="primary" @click="addPropForm.step=2;initGoodsMore()">下一步</el-button>
          </template>
          <template v-else>
            <el-button v-if="addPropForm.step==1" :loading="loading" type="primary" @click="nextGoodsFun()">下一步</el-button>
          </template>
          <template v-if="addPropForm.goods_id">
            <el-button v-if="addPropForm.step==2 && isStepEdit" :loading="loading" type="success" @click="editGoodsFun2()">编辑</el-button>
            <el-button v-if="addPropForm.step==2 && !isStepEdit" :loading="loading" type="success" @click="nextGoodsFun2()">保存</el-button>
            <el-button v-if="addPropForm.step==2 && isStepEdit" :loading="loading" type="primary" @click="addPropForm.step=3;initGoodsMore()">下一步</el-button>
          </template>
          <!-- <template v-else>
            <el-button v-if="addPropForm.step==2" :loading="loading" type="primary" @click="nextGoodsFun2()">下一步</el-button>
          </template> -->
          <el-button v-if="addPropForm.step==3" :loading="loading" type="primary" @click="nextGoodsFun3()">下一步</el-button>
          <el-button v-if="addPropForm.step==4" :loading="loading" type="primary" @click="nextGoodsFun4()">下一步</el-button>
          <el-button v-if="addPropForm.step==5" :loading="loading" type="primary" @click="saveGoodsFun5()">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { computed,ref,onMounted } from 'vue'
import { useChatInfoStore, useJobIDStore } from '@/store/index.js'
import { ElMessageBox, ElMessage } from 'element-plus'
import { postApi, exportExcel } from "@/api/api.js"
import elUploadOptionMultiple from '@/components/elUploadOptionMultiple.vue';
import elUploadOptionMultipleSmall from '@/components/elUploadOptionMultipleSmall.vue';
import moment from 'moment'

let prop = ref({
  item_number: '',
  title: '',
  status: '',
  min_price: '',
  max_price: '',
  create_timeArr: '',
  create_time: '',
  min_stock: '',
  max_stock: '',
  cate_id: '',
  page: 1,
  limit: 10,
  total: 0
})
let loading = ref(false)
let tableData = ref([])

// 分类相关
let oneClassData=ref([])
let twoClassData=ref([])
let threeClassData=ref([])
let oneClassValue=ref('')
let twoClassValue=ref('')
let threeClassValue=ref('')
function init() { // init初始化执行1
  loading.value = true
  postApi('/mall.cate/index', {
    pid: 0
  }).then(res => {
    if(res.code === 1){
      loading.value = false
      oneClassData.value = res.data
      if(res.data.length > 0){
        oneClassValue.value = res.data[0].id
        initTwo()
      }
    }
  }).catch(err => {
    loading.value = false
  })
}
function initTwo() { // init初始化执行2
  loading.value = true
  postApi('/mall.cate/index', {
    pid: oneClassValue.value
  }).then(res => {
    if(res.code === 1){
      loading.value = false
      twoClassData.value = res.data
    }
  }).catch(err => {
    loading.value = false
  })
}
function initThree() { // init初始化执行3
  loading.value = true
  postApi('/mall.cate/index', {
    pid: twoClassValue.value
  }).then(res => {
    if(res.code === 1){
      loading.value = false
      threeClassData.value = res.data
    }
  }).catch(err => {
    loading.value = false
  })
}
function ClassClick(row, index) {
  if(index===1){
    oneClassValue.value = row.id
    twoClassValue.value = ''
    threeClassValue.value = ''
    initTwo()
  }
  if(index===2){
    twoClassValue.value = row.id
    threeClassValue.value = ''
    initThree()
  }
  if(index===3){
    threeClassValue.value = row.id
  }
}
// 分类相关end

// 新增商品
let dialogVisible = ref(false)
let oldInfoSku = ref([])
let addPropForm = ref({
  step: 1,
  partition: 1, // string是分区ID
  cate_id: '', // string是一级分类
  cate_two: '', // string是二级分类
  cate_three: '', // string是三级分类
  title: '', // string是商品名称
  images: [], // string是商品图片
  describe: '', // string是商品描述
  region: '', // string是商品地区
  ban_region: '', //string是禁售地区
  market_price: '', //string是原价
  discount_price: '', //string是折扣价
  express: '', //string是运费
  is_hot: 0, //string是是否热门商品
  goods_id: '', // 商品ID
  item_number: '', // 商品货号
  label: '', // 商品标签
  is_pre: '', // 是否开启预售(1:是,0:否)
  put_time: '',
  auto_put_time: '', // 自动上架时间
  start_time: '', // 预售开始时间
  end_time: '', // 预售结束时间
  sku: [{
    title: '',
    name: '',
    image: '',
    values: ''
  }],
  infoSku: [],
  content: [{
    key: '',
    value: '',
    image: ''
  }],
  info: [{
    type: 1,
    TempArr: [{
      goods_id: '',
      type: 1,
      title: '',
      files: []
    }]
  }, {
    type: 2,
    TempArr: [{
      goods_id: '',
      type: 2,
      title: '',
      files: []
    }]
  }, {
    type: 3,
    TempArr: [{
      goods_id: '',
      type: 3,
      title: '',
      files: []
    }]
  }, {
    type: 4,
    TempArr: [{
      goods_id: '',
      type: 4,
      title: '',
      files: []
    }]
  }]
})

function addClick() {
  dialogVisible.value = true
  addPropForm.value = {
    step: 1,
    partition: 1, // string是分区ID
    cate_id: '', // string是一级分类
    cate_two: '', // string是二级分类
    cate_three: '', // string是三级分类
    title: '', // string是商品名称
    images: [], // string是商品图片
    describe: '', // string是商品描述
    region: '', // string是商品地区
    ban_region: '', //string是禁售地区
    market_price: '', //string是原价
    discount_price: '', //string是折扣价
    express: '', //string是运费
    is_hot: 0, //string是是否热门商品
    goods_id: '', // 商品ID
    item_number: '', // 商品货号
    label: '', // 商品标签
    is_pre: '', // 是否开启预售(1:是,0:否)
    put_time: '',
    auto_put_time: '', // 自动上架时间
    start_time: '', // 预售开始时间
    end_time: '', // 预售结束时间
    sku: [{
      title: '',
      name: '',
      image: '',
      values: ''
    }],
    content: [{
      key: '',
      value: '',
      image: ''
    }],
    info: [{
      type: 1,
      TempArr: [{
        goods_id: '',
        type: 1,
        title: '',
        files: []
      }]
    }, {
      type: 2,
      TempArr: [{
        goods_id: '',
        type: 2,
        title: '',
        files: []
      }]
    }, {
      type: 3,
      TempArr: [{
        goods_id: '',
        type: 3,
        title: '',
        files: []
      }]
    }, {
      type: 4,
      TempArr: [{
        goods_id: '',
        type: 5,
        title: '',
        files: []
      }]
    }]
  }
}
function editClick(row) {
  console.log(row)
  dialogVisible.value = true
  let imagesTemp = []
  row.images.split("|").forEach(element => {
    imagesTemp.push({
      url: element
    })
  })
  if(row.partition_name=='新品区'){
    addPropForm.value.partition = 1
  }
  if(row.partition_name=='加购区'){
    addPropForm.value.partition = 2
  }
  if(row.partition_name=='甄选区'){
    addPropForm.value.partition = 3
  }
  if(row.partition_name=='福利区'){
    addPropForm.value.partition = 4
  }
  oneClassValue.value = row.cate_id
  twoClassValue.value = row.cate_two
  threeClassValue.value = row.cate_three
  addPropForm.value = {
    step: 1,
    partition: addPropForm.value.partition, // string是分区ID
    cate_id: row.cate_id, // string是一级分类
    cate_two: row.cate_two, // string是二级分类
    cate_three: row.cate_three, // string是三级分类
    title: row.title, // string是商品名称
    images: imagesTemp, // string是商品图片
    describe: row.describe, // string是商品描述
    region: row.region, // string是商品地区
    ban_region: row.ban_region, //string是禁售地区
    market_price: '', //string是原价
    discount_price: '', //string是折扣价
    express: '', //string是运费
    is_hot: row.is_hot, //string是是否热门商品
    goods_id: row.id, // 商品ID
    item_number: row.item_number, // 商品货号
    label: row.label, // 商品标签
    is_pre: row.is_pre, // 是否开启预售(1:是,0:否)
    put_time: row.put_time,
    auto_put_time: row.auto_put_time, // 自动上架时间
    start_time: row.start_time ? [row.start_time, row.end_time] : '', // 预售开始时间
    end_time: row.end_time, // 预售结束时间
    sku: [{
      title: '',
      name: '',
      image: '',
      values: ''
    }],
    content: [{
      key: '',
      value: '',
      image: ''
    }],
    info: [{
      type: 1,
      TempArr: [{
        goods_id: '',
        type: 1,
        title: '',
        files: ''
      }]
    }, {
      type: 2,
      TempArr: [{
        goods_id: '',
        type: 2,
        title: '',
        files: ''
      }]
    }, {
      type: 3,
      TempArr: [{
        goods_id: '',
        type: 3,
        title: '',
        files: ''
      }]
    }, {
      type: 4,
      TempArr: [{
        goods_id: '',
        type: 5,
        title: '',
        files: ''
      }]
    }]
  }
}
function deleteClick(row) {
  ElMessageBox.confirm('确定要删除该条数据吗？','删除').then(() => {
    postApi('/mall.goods/delete', { id:row.id }).then(res => {
      if(res.code === 1){
        ElMessage({
          message: "操作成功",
          type: 'success'
        })
        initShoping()
      }
    })
  })
}
// 上传图片回传函数
function getImagesFun(row) {
  console.log(row)
  addPropForm.value.images = row
}
// 新增商品第一步
function nextGoodsFun() {
  if(addPropForm.value.is_pre==1) { // 开启预售
    if(!addPropForm.value.start_time) {
      ElMessage({message: "开启预售必填预售时间", type: 'error'})
      return
    }
  }else{ // 不开启预售
    if(addPropForm.value.put_time || addPropForm.value.auto_put_time) {
      console.log('通过')
    }else{
      ElMessage({message: "上架时间或者自动上架时间必填", type: 'error'})
      return
    }
  }
  loading.value = true
  let imagesTemp = []
  addPropForm.value.images.forEach(element => {
    imagesTemp.push(element.url)
  })
  if(addPropForm.value.goods_id){
    let obj = {
      id: addPropForm.value.goods_id,
      partition: addPropForm.value.partition, // string是分区ID
      cate_id: oneClassValue.value, // string是一级分类
      cate_two: twoClassValue.value, // string是二级分类
      cate_three: threeClassValue.value, // string是三级分类
      title: addPropForm.value.title, // string是商品名称
      images: imagesTemp, // string是商品图片
      describe: addPropForm.value.describe, // string是商品描述
      region: addPropForm.value.region, // string是商品地区
      ban_region: addPropForm.value.ban_region, //string是禁售地区
      market_price: '', //string是原价
      discount_price: '', //string是折扣价
      express: '', //string是运费
      is_hot: addPropForm.value.is_hot, //string是是否热门商品
      item_number: addPropForm.value.item_number, // 商品货号
      label: addPropForm.value.label, // 商品标签
      is_pre: addPropForm.value.is_pre, // 是否开启预售(1:是,0:否)
      put_time: addPropForm.value.put_time,
      auto_put_time: addPropForm.value.auto_put_time, // 自动上架时间
      start_time: addPropForm.value.start_time ? addPropForm.value.start_time[0]: '', // 预售开始时间
      end_time: addPropForm.value.start_time ? addPropForm.value.start_time[1]: '' // 预售结束时间
    }
    console.log(obj)
    postApi('/mall.goods/edit', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        addPropForm.value.step = 2
        loading.value = false
        initGoodsMore()
      }
    }).catch(err => {
      loading.value = false
    })
  }else{
    let obj = {
      partition: addPropForm.value.partition, // string是分区ID
      cate_id: oneClassValue.value, // string是一级分类
      cate_two: twoClassValue.value, // string是二级分类
      cate_three: threeClassValue.value, // string是三级分类
      title: addPropForm.value.title, // string是商品名称
      images: imagesTemp, // string是商品图片
      describe: addPropForm.value.describe, // string是商品描述
      region: addPropForm.value.region, // string是商品地区
      ban_region: addPropForm.value.ban_region, //string是禁售地区
      market_price: '', //string是原价
      discount_price: '', //string是折扣价
      express: '', //string是运费
      is_hot: addPropForm.value.is_hot, //string是是否热门商品
      item_number: addPropForm.value.item_number, // 商品货号
      label: addPropForm.value.label, // 商品标签
      is_pre: addPropForm.value.is_pre, // 是否开启预售(1:是,0:否)
      put_time: addPropForm.value.put_time,
      auto_put_time: addPropForm.value.auto_put_time, // 自动上架时间
      start_time: addPropForm.value.start_time ? addPropForm.value.start_time[0]: '', // 预售开始时间
      end_time: addPropForm.value.start_time ? addPropForm.value.start_time[1]: '' // 预售结束时间
    }
    console.log(obj)
    postApi('/mall.goods/add', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        addPropForm.value.goods_id = res.data.goods_id
        addPropForm.value.step = 2
        loading.value = false
        initGoodsMore()
      }
    }).catch(err => {
      loading.value = false
    })
  }
}
// 查询商品对应的详情
let batchValue = ref({
  arr: [],
  price: '',
  money: '',
  stock: '',
  profit_1: '',
  profit_2: '',
  profit_3: '',
  profit_4: '',
  profit_5: '',
  bonus: '',
  one_num: ''
})
let batchOption = ref([])
let isStepEdit = ref(true) // 第二步是否可以编辑修改, 默认可以,当有过sku值表示填过第二步,则需要不能修改,需要去点击按钮改变状态
function initGoodsMore() {
  if(addPropForm.value.step==2){
    postApi('/mall.goodsSku/index', {
      goods_id: addPropForm.value.goods_id
    }).then(res => {
      if(res.code === 1){
        console.log(res)
        if(res.data.length > 0){
          isStepEdit.value = true
          res.data.forEach(element => {
            if(element.values.length>0){
              console.log(element.values)
              let valuesArr = []
              let imageArr = []
              element.values.forEach((valList,index) => {
                valuesArr.push({
                  name: valList
                })
                if(element.image[index]){
                  imageArr.push({
                    url: element.image[index]
                  })
                }else{
                  imageArr.push({
                    url: ''
                  })
                }
              })
              element.values = valuesArr
              element.image = imageArr
            }else{
              let valuesArr = []
              let imageArr = []
              valuesArr.push({
                name: ''
              })
              imageArr.push({
                url: ''
              })
              element.values = valuesArr
              element.image = imageArr
            }
          });
          console.log("第二步加载最终数据")
          console.log(res.data)
          addPropForm.value.sku = res.data
        }else{
          isStepEdit.value = false
          addPropForm.value.sku = [{
            title: '',
            image: [{ url:'' }],
            values: [{ name:'' }]
          }]
        }
      }
    }).catch(err => {
    })
  }
  if(addPropForm.value.step==3){
    batchValue.value.arr = []
    postApi('/mall.goodsSku/index', {
      goods_id: addPropForm.value.goods_id
    }).then(res => {
      if(res.code === 1){
        let skuData = res.data
        postApi('/mall.goodsSkuInfo/index', {
          goods_id: addPropForm.value.goods_id
        }).then(res => {
          if(res.code === 1){
            console.log(res)
            if(res.data.length > 0){
              addPropForm.value.infoSku = res.data
              batchOption.value = res.data
              oldInfoSku.value = JSON.parse(JSON.stringify(res.data))
            }else{
              console.log(skuData)
              addPropForm.value.infoSku = []
              let temp = []
              skuData.forEach(element => {
                temp.push({
                  values: element.values
                })
              });
              let tempArr = combinationsFun(temp)
              tempArr.forEach(element => {
                addPropForm.value.infoSku.push({
                  goods_id: addPropForm.value.goods_id,
                  sku: element.join(' | '),
                  price: '',
                  money: '',
                  profit_1: '',
                  profit_2: '',
                  profit_3: '',
                  profit_4: '',
                  profit_5: '',
                  bonus: '',
                  stock: '',
                  status: 1,
                  one_num: ''
                })
              })
              batchOption.value = addPropForm.value.infoSku
              console.log('最终渲染数据', addPropForm.value.infoSku)
            }
            batchValue.value = {
              arr: [],
              price: '',
              money: '',
              stock: '',
              profit_1: '',
              profit_2: '',
              profit_3: '',
              profit_4: '',
              profit_5: '',
              bonus: '',
              one_num: ''
            }
            batchOption.value.forEach(element => {
              batchValue.value.arr.push(element.sku)
            })
          }
        }).catch(err => {
        })
      }
    }).catch(err => {
    })
  }
  if(addPropForm.value.step==4){
    postApi('/mall.goodsParam/index', {
      goods_id: addPropForm.value.goods_id
    }).then(res => {
      if(res.code === 1){
        console.log(res)
        res.data.content.forEach(element => {
          element.image = [{url: element.image }]
        })
        addPropForm.value.content = res.data.content
        console.log(addPropForm.value.content)
      }
    }).catch(err => {
    })
  }
  if(addPropForm.value.step==5){
    postApi('/mall.goodsInfo/index', {
      goods_id: addPropForm.value.goods_id
    }).then(res => {
      if(res.code === 1){
        // console.log(res)
        if(res.data.length > 0){
          let temp = [{
            type: 1,
            TempArr:[] 
          },{
            type: 2,
            TempArr:[] 
          },{
            type: 3,
            TempArr:[] 
          },{
            type: 4,
            TempArr:[] 
          }]
          res.data.forEach(element => {
            if(element.files.length>0){
              let tempUrl = []
              element.files.forEach(url => {
                tempUrl.push({
                  url: url
                })
              })
              element.files = tempUrl
            }
            temp.forEach(sub => {
              if(element.type == sub.type){
                sub.TempArr.push(element)
              }
            })
          })
          console.log(temp)
          addPropForm.value.info = temp
        }else{
          addPropForm.value.info = [{
            type: 1,
            TempArr: [{
              goods_id: addPropForm.value.goods_id,
              type: 1,
              title: '',
              files: []
            }]
          }, {
            type: 2,
            TempArr: [{
              goods_id: addPropForm.value.goods_id,
              type: 2,
              title: '',
              files: []
            }]
          }, {
            type: 3,
            TempArr: [{
              goods_id: addPropForm.value.goods_id,
              type: 3,
              title: '',
              files: []
            }]
          }, {
            type: 4,
            TempArr: [{
              goods_id: addPropForm.value.goods_id,
              type: 4,
              title: '',
              files: []
            }]
          }]
        }
      }
    }).catch(err => {
    })
  }
}
function combinationsFun(arr) {
  const input = arr
  // const input = [
  //   { values: ["纯棉", "塑料"] },
  //   { values: ["白色", "黑色"] },
  //   { values: ["好看", "美丽"] }
  // ];

  const combinations = [];

  // 获取每个 values 数组的长度
  const lengths = input.map(obj => obj.values.length);

  // 确保至少有一个 values 数组有元素
  if (lengths.some(length => length > 0)) {
      // 初始化索引数组，用于在各自的 values 数组中迭代
      const indices = Array(lengths.length).fill(0);

      // 当最内层循环的索引没有超出范围时，继续迭代
      while (true) {
          // 根据当前索引构建组合
          const combination = indices.map((index, i) => input[i].values[index]);

          // 将组合添加到结果数组中
          combinations.push(combination);

          // 尝试增加最内层的索引
          let j = indices.length - 1;
          while (j >= 0 && indices[j] === lengths[j] - 1) {
              // 如果索引已经到达上限，则重置为 0 并继续向上层索引回溯
              indices[j] = 0;
              j--;
          }

          // 如果还有可增加的索引，则增加它
          if (j >= 0) {
              indices[j]++;
          } else {
              // 如果没有可增加的索引了，说明已经遍历完了所有组合，退出循环
              break;
          }
      }
  }
   return combinations
  console.log(combinations);
}
// 第二步
function addListSku() {
  addPropForm.value.sku.push({
    title: '',
    image: [{ url:'' }],
    values: [{ name:'' }]
  })
}
function editGoodsFun2(params) {
  ElMessageBox.confirm('编辑商品sku分类数据会重新生产商品sku明细','是否编辑').then(() => {
    isStepEdit.value=false
  })
}
 // 第二步上传回传函数
function getskuImagesFun(index, j, row) {
  console.log(row)
  if(row && row.length > 0){
    addPropForm.value.sku[index].image[j].url = row[0].url
  }else{
    addPropForm.value.sku[index].image[j].url = ''
  }
}
function deleteSkuFun(index, row) {
  if(row.id){
    ElMessageBox.confirm('确定要删除该条数据吗？','删除').then(() => {
      postApi('/mall.goodsInfo/delete', { id:row.id }).then(res => {
        if(res.code === 1){
          ElMessage({
            message: "操作成功",
            type: 'success'
          })
          addPropForm.value.sku.splice(index, 1)
        }
      })
    })
  }else{
    addPropForm.value.sku.splice(index, 1)
  }
}
function addListSkuValues(index) {
  console.log(addPropForm.value.sku)
  addPropForm.value.sku[index].values.push(
    { name: '' }
  )
  addPropForm.value.sku[index].image.push(
    { url: '' }
  )
}
function deleteSkuValuesFun(index, j, row) {
  addPropForm.value.sku[index].values.splice(j, 1)
}

// 新增商品第二步
function nextGoodsFun2() {
  loading.value = true
  console.log('提交前数据', addPropForm.value.sku)
  let skuTemp = []
  addPropForm.value.sku.forEach(element => {
    let imageArr=[], valuesArr = []
    if(element.image.length>0){
      element.image.forEach(row => {
        if(row.url){
          imageArr.push(row.url)
        }
      })
    }
    // element.image = imageArr
    if(element.values.length>0){
      element.values.forEach(row => {
        valuesArr.push(row.name)
      })
    }
    // element.values = valuesArr
    skuTemp.push({
      goods_id: addPropForm.value.goods_id,
      id: element.id || '',
      image: imageArr,
      title: element.title,
      values: valuesArr
    })
  });
  console.log('第二步提交数据', skuTemp)
  if(skuTemp[0].id){
    let obj = {
      sku: skuTemp
    }
    console.log(obj)
    postApi('/mall.goodsSku/edit', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        addPropForm.value.step = 3
        loading.value = false
        initGoodsMore()
      }
    }).catch(err => {
      loading.value = false
    })
  }else{
    let obj = {
      goods_id: addPropForm.value.goods_id,
      sku: skuTemp
    }
    postApi('/mall.goods/addSkuCate', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        addPropForm.value.step = 3
        loading.value = false
        initGoodsMore()
      }
    }).catch(err => {
      loading.value = false
    })
  }
}

// 第三步
function batchClick() {
  console.log(batchValue.value)
  console.log(addPropForm.value.infoSku)
  addPropForm.value.infoSku.forEach(element => {
    batchValue.value.arr.forEach(batch => {
      if(element.sku===batch){
        batchValue.value.price ? element.price = batchValue.value.price : ''
        batchValue.value.money ? element.money = batchValue.value.money : ''
        batchValue.value.stock ? element.stock = batchValue.value.stock : ''
        batchValue.value.profit_1 ? element.profit_1 = batchValue.value.profit_1 : ''
        batchValue.value.profit_2 ? element.profit_2 = batchValue.value.profit_2 : ''
        batchValue.value.profit_3 ? element.profit_3 = batchValue.value.profit_3 : ''
        batchValue.value.profit_4 ? element.profit_4 = batchValue.value.profit_4 : ''
        batchValue.value.profit_5 ? element.profit_5 = batchValue.value.profit_5 : ''
        batchValue.value.bonus ? element.bonus = batchValue.value.bonus : ''
        batchValue.value.one_num ? element.one_num = batchValue.value.one_num : ''
      }
    })
  })
}
function nextGoodsFun3() {
  loading.value = true
  let obj = {
    info: addPropForm.value.infoSku
  }
  console.log(obj)
  if(addPropForm.value.infoSku[0].id){
    addPropForm.value.infoSku.forEach(element => {
      oldInfoSku.value.forEach(old => {
        if(element.id === old.id){
          if(element.stock !== old.stock){
            postApi('/mall.goodsSkuInfo/stock', {
              id: element.id,
              stock: element.stock
            }).then(res => {
              if(res.code === 1){
                ElMessage({message: element.sku + "增加库存成功",type: 'success'})
              }
            }).catch(err => {
            })
          }
        }
      })
    })
    postApi('/mall.goodsSkuInfo/edit', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        addPropForm.value.step = 4
        loading.value = false
        initGoodsMore()
      }
    }).catch(err => {
      loading.value = false
    })
  }else{
    postApi('/mall.goods/addSkuInfo', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        addPropForm.value.step = 4
        loading.value = false
        initGoodsMore()
      }
    }).catch(err => {
      loading.value = false
    })
  }
}

// 第4步，商品参数设置
function addParameterFun() {
  addPropForm.value.content.push({
    key: '',
    value: '',
    image: ''
  })
}
function getContentImagesFun(index, row) {
  if(row.length>0){
    addPropForm.value.content[index].image = row
  }else{
    addPropForm.value.content[index].image = [{url:''}]
  }
}
function deleteParameterFun(index) {
  addPropForm.value.content.splice(index, 1)
}
function nextGoodsFun4() {
  loading.value = true
  
  addPropForm.value.content.forEach(element => {
    if(element.image){
      element.image = element.image[0].url
    }
  })
  let obj = {
    goods_id: addPropForm.value.goods_id,
    content: addPropForm.value.content
  }
  console.log(obj)
  postApi('/mall.goods/addGoodsParam', obj).then(res => {
    if(res.code === 1){
      ElMessage({message: "操作成功",type: 'success'})
      addPropForm.value.step = 5
      loading.value = false
      initGoodsMore()
    }
  }).catch(err => {
    loading.value = false
  })
}

// 第5步，商品详情
function addInfoFun(row,index) {
  console.log(row)
  addPropForm.value.info[index].TempArr.push({
    goods_id: addPropForm.value.goods_id,
    type: row.type,
    title: '',
    files: []
  })
}
function deleteInfoFun(index, j, row) {
  ElMessageBox.confirm('确定要删除该条数据吗？','删除').then(() => {
    postApi('/mall.goodsInfo/delete', { id:row.id }).then(res => {
      if(res.code === 1){
        ElMessage({
          message: "操作成功",
          type: 'success'
        })
        addPropForm.value.info[index].TempArr.splice(j, 1)
      }
    })
  })
}
function getImagesGoodsMoreFun(index, j, row) {
  addPropForm.value.info[index].TempArr[j].files = row
}
function saveGoodsFun5() {
  loading.value = true
  console.log(addPropForm.value.info)
  let tempObj = []
  addPropForm.value.info.forEach(element => {
    element.TempArr.forEach(sub => {
      let filesArr = []
      if(sub.files.length>0){
        sub.files.forEach(file => {
          filesArr.push(file.url)  
        })
        // sub.files = filesArr
      }
      tempObj.push({
        files: filesArr,
        goods_id: sub.goods_id,
        id: sub.id,
        title: sub.title,
        type: sub.type
      })
    })
  });
  console.log(tempObj)
  let obj = {
    info: tempObj
  }
  if(addPropForm.value.info[0].TempArr[0].id){
    postApi('/mall.goodsInfo/edit', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        addPropForm.value.step = 1
        dialogVisible.value = false
        loading.value = false
        initShoping()
      }
    }).catch(err => {
      loading.value = false
    })
  }else{
    postApi('/mall.goods/addGoodsInfo', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        addPropForm.value.step = 1
        dialogVisible.value = false
        loading.value = false
        initShoping()
      }
    }).catch(err => {
      loading.value = false
    })
  }
}

// 查询商品
function initShoping() {
  loading.value = true
  let obj={
    item_number: prop.value.item_number,
    title: prop.value.title,
    status: prop.value.status,
    min_price: prop.value.min_price,
    max_price: prop.value.max_price,
    create_time: prop.value.create_timeArr ? prop.value.create_timeArr[0] : '',
    min_stock: prop.value.min_stock,
    max_stock: prop.value.max_stock,
    cate_id: prop.value.cate_id,
    page: prop.value.page,
    limit: prop.value.limit
  }
  postApi('/mall.goods/index', obj).then(res => {
    loading.value = false
    tableData.value = res.data
    prop.value.total = res.count
  }).catch(err => {
    loading.value = false
  })
}
function resetClick() { // 重置
  prop.value = {
    page: 1,
    limit: 10,
    total: 0,
    title: '',
    status: '',
    min_price: '',
    max_price: '',
    create_timeArr: '',
    create_time: '',
    min_stock: '',
    max_stock: '',
    cate_id: ''
  }
  initShoping()
}
function handleCurrentChange(val){
  prop.value.page = val
  initShoping()
}
function handleSizeChange(params) {
  prop.value.page = 1
  prop.value.limit = params
  initShoping()
}
// 导出数据
function exportFun() {
  loading.value = true
  const params = {
    item_number: prop.value.item_number,
    title: prop.value.title,
    status: prop.value.status,
    min_price: prop.value.min_price,
    max_price: prop.value.max_price,
    create_time: prop.value.create_timeArr ? prop.value.create_timeArr[0] : '',
    min_stock: prop.value.min_stock,
    max_stock: prop.value.max_stock,
    cate_id: prop.value.cate_id
  }
  postApi('/mall.goods/export', params).then((res) => {
    loading.value = false
    let a = document.createElement('a')
    a.href = res.data.url // '下载链接';
    a.download = 'goodsList';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    ElMessage({message: "导出成功！",type: 'success'})
  }).catch(() => {
    loading.value = false
    ElMessage({message: "导出失败！",type: 'error'})
  })
}
// 筛选
let tableCheckList = ref([])
function handleSelectionChange(list) {
  console.log(list)
  tableCheckList.value = list
}
function getRowKeys(row) {
  return row.id
}
// 上下架
let refTable = ref('')
function groundingFun() {
  let ids = []
  tableCheckList.value.forEach(element => {
    ids.push(element.id)
  });
  let obj={
    ids: ids.toString(),
    status: 2,
    put_time: moment().format('YYYY-MM-DD HH:mm:ss') // 获取当前时间并格式化
  }
  postApi('/mall.goods/batchPush', obj).then(res => {
    loading.value = false
    ElMessage({message: "上架成功！",type: 'success'})
    initShoping()
    refTable.value.clearSelection()
  }).catch(err => {
    loading.value = false
  })
}
function OffShelfFun() {
  let ids = []
  tableCheckList.value.forEach(element => {
    ids.push(element.id)
  });
  let obj={
    ids: ids,
    status: 1,
    put_time: moment().format('YYYY-MM-DD HH:mm:ss') // 获取当前时间并格式化
  }
  postApi('/mall.goods/batchPush', obj).then(res => {
    loading.value = false
    ElMessage({message: "下架成功！",type: 'success'})
    initShoping()
    refTable.value.clearSelection()
  }).catch(err => {
    loading.value = false
  })
}
// 单个上下架
function groundingOneFun(row) {
  let obj={
    ids: row.id,
    status: 2,
    put_time: moment().format('YYYY-MM-DD HH:mm:ss') // 获取当前时间并格式化
  }
  postApi('/mall.goods/batchPush', obj).then(res => {
    loading.value = false
    ElMessage({message: "上架成功！",type: 'success'})
    initShoping()
  }).catch(err => {
    loading.value = false
  })
}
function OffShelfOneFun(row) {
  let obj={
    ids: row.id,
    status: 1,
    put_time: moment().format('YYYY-MM-DD HH:mm:ss') // 获取当前时间并格式化
  }
  postApi('/mall.goods/batchPush', obj).then(res => {
    loading.value = false
    ElMessage({message: "下架成功！",type: 'success'})
    initShoping()
  }).catch(err => {
    loading.value = false
  })
}

// 关闭弹框
function dialogClose(params) {
  dialogVisible.value = false
}

onMounted(()=>{
  initShoping()
  init()
})
</script>

<style lang="scss" scoped>
.goodsDialog{
  .classOption{
    display: flex;
    justify-content: space-between;
    .oneClass{
      width: 32%;
      padding: 10px 16px;
      background: #FFFFFF;
      border-radius: 5rpx 5rpx 5rpx 5rpx;
      box-sizing: border-box;
    }
    .twoClass{
      width: 32%;
      padding: 10px 16px;
      background: #FFFFFF;
      border-radius: 5rpx 5rpx 5rpx 5rpx;
      box-sizing: border-box;
    }
    .threeClass{
      width: 32%;
      padding: 10px 16px;
      background: #FFFFFF;
      border-radius: 5rpx 5rpx 5rpx 5rpx;
      box-sizing: border-box;
    }
    .list{
      cursor: pointer;
      padding: 0 13px;
      margin-bottom: 8px;
      height: 36px;
      background: #F6F6F6;
      border-radius: 4px 4px 4px 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-icon{
        margin-left: 4px;
      }
      .deleteIco{
        cursor: pointer;
        margin-right: 4px;
      }
    }
    .active{
      background: #000000;
      border-radius: 4px 4px 4px 4px;
      color: #FFFFFF;
      .el-icon{
        color: #FFFFFF;
      }
      .deleteIco{
        color: #FFFFFF;
      }
    }
    .title{
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 14px;
      color: #BA9763;
      .el-icon{
        width: 36px;
        height: 36px;
        background: #F6F6F6;
        border-radius: 5px 5px 5px 5px;
        color: #666;
        font-size: 16px;
        margin-right: 4px;
      }
    }
    .addBut{
      height: 36px;
      line-height: 36px;
      text-align: center;
      display: block;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #F6F6F6;
      font-weight: 400;
      font-size: 14px;
      color: #000000;
    }
  }
}
::v-deep .goodsDialog{
  background: rgba(245,245,245,1)!important;
}
.dialogContent{
  background: rgba(245,245,245,1);
  .steps{
    margin-bottom: 10px;
  }
  .partitionBox{
    padding: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    background: #fff;
    border-radius: 5px;
    .title{
      margin-bottom: 10px;
      font-weight: bold;
    }
    .partitionList{
      display: flex;
      justify-content: space-between;
      .list{
        cursor: pointer;
        width: 20%;
        padding: 10px;
        background: rgba(249,251,255, 1);
        border: 1px solid rgba(249,251,255, 1);
        border-radius: 10px;
        p{
          font-size: 10px;
          color: #999;
        }
      }
      .active{
        border: 1px solid rgba(134,191,255, 1);
      }
    }
  }
  .classCheckBox{
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 5px;
    .title{
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
  .goodsInfo{
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 5px;
    .title{
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
  .skuOption{
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 5px;
    .title{
      margin-bottom: 10px;
      font-weight: bold;
    }
    .skuListBox{
      .title{
        font-size: 12px;
        .illustration{
          margin-left: 10px;
        }
      }
      .list{
        margin-bottom: 10px;
        padding: 10px;
        background: rgba(249,251,255,1);
        border-radius: 5px;
        .name{
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          span{
            display: inline-block;
            width: 120px;
          }
        }
        .skuimagesBox{
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          .label{
            display: inline-block;
            width: 120px;
          }
        }
        // .images{
        //   margin-bottom: 10px;
        //   display: flex;
        //   align-items: center;
        //   span{
        //     display: inline-block;
        //     width: 120px;
        //   }
        // }
        .nextSkuList{
          
          .nextList{
            display: flex;
            align-items: center;
            margin-bottom: 8px;
          }
        }
      }
    }
  }
  .skuMoreOption{
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 5px;
    .title{
      margin-bottom: 10px;
      font-weight: bold;
    }
    .batchOption{
      margin-bottom: 20px;
      display: flex;
      .top{
        margin-bottom: 20px;
      }
      .down{
        margin-bottom: 10px;
        .labelSpan{
          width: 100px;
          display: inline-block;
          margin-right: 10px;
          text-align: right;
        }
        .el-input{
          margin-right: 10px;
        }
      }
    }
    .skuInfoList{
      margin-bottom: 10px;
      .top{
        display: flex;
        justify-content: space-between;
      }
      .el-input{
        margin-right: 20px;
        margin-bottom: 10px;
      }
      .inputBox{
        .labelSpan{
          width: 100px;
          display: inline-block;
          margin-right: 10px;
          text-align: right;
        }
      }
    }
  }
  .parameterOption{
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 5px;
    .title{
      margin-bottom: 10px;
      font-weight: bold;
    }
    .parameterList{
      .list{
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        .el-input{
          margin: 0 10px;
        }
      }
      .addParameterBut{
        display: inline-block;
        .el-icon{
          margin-right: 8px;
        }
      }
    }
  }
  .infoOption{
    .goodsMore{
      padding: 10px;
      margin-bottom: 10px;
      background: #fff;
      border-radius: 5px;
      .title{
        margin-bottom: 10px;
        font-weight: bold;
      }
      .goodsMoreList{
        .list{
          margin-bottom: 10px;
          .nameTop{
            margin-bottom: 10px;
            font-size: 14px;
          }
          .msg{
            margin: 10px 0;
          }
        }
        .addParameterBut{
          margin-top: 10px;
          cursor: pointer;
          display: inline-block;
          .el-icon{
            margin-right: 8px;
          }
        }
      }
    }
  }
}
</style>
